<template>
  <el-drawer
      size="50%"
      title="等待时长"
      direction="rtl"
      :before-close="handleCancel"
      :model-value="true">
    <div class="form-wrapper">
      <el-form class="custom-form" ref="form" :rules="rules" :model="form" label-width="80px" label-position="top" :disabled="readOnly">
        <el-form-item label="组件名称" prop="name">
          <el-input class="custom-input custom-input-name"
                    v-model.trim="form.name"
                    type="text"
                    maxlength="15"
                    :show-word-limit="true">
          </el-input>
        </el-form-item>

        <el-form-item label="等待时长" prop="delayTimeValue">
          <div class="wait-input">
            <el-input type="number" v-model="form.delayTimeValue" placeholder="请输入" style="width: 104px"
                      min="0"></el-input>
            <el-select v-model="form.delayTimeType" placeholder="等待单位" style="width: 104px">
              <el-option v-for="(item, index) in delayTimeTypes"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <div class="label-right">后执行</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {NodeDrawerDataModel} from "@/views/workTable/dataModel/NodeDrawerDataModel";

const delayTimeTypes = [
  {
    value: 1,
    label: '年',
  },
  {
    value: 2,
    label: '月',
  },
  {
    value: 3,
    label: '日',
  },
  {
    value: 4,
    label: '时'
  },
  {
    value: 5,
    label: '分'
  },
  {
    value: 6,
    label: '秒'
  }
]
export default {
  props: {
    dialogData: Object,
    addNodeEventData: Object,
    readOnly: Boolean,
  },
  emits: ['confirm', 'cancel'],

  data() {
    return {
      form: {
        name: '',
        executeTimeType: 2, // 此处固定为2, 执行时间类型  1-直接执行  2-延迟执行
        delayTimeValue: 1,
        delayTimeType: 2,  //延迟执行的时间类型  1-年 2-月 3-日 4-时 5-分 6-秒 7-周
      },
      delayTimeTypes,
      rules: {
        name: [
          {
            required: true,
            message: '请输入组件名称',
          }
        ],
        delayTimeValue: [
          {
            required: true,
            message: '请输入等待时长',
            trigger: 'change'
          }
        ]
      }
    }
  },

  mounted() {
    if (this.dialogData && Object.keys(this.dialogData).length) {
      this.form = this.dialogData
    }
  },

  methods: {
    handleCancel() {
      this.$emit('cancel')
    },

    handleConfirm() {
      if (!this.form.name) {
        this.$message.error('请输入组件名称')
        return
      }

      if (!this.form.delayTimeValue) {
        this.$message.error('请输入等待时长')
        return
      }

      if (this.form.delayTimeValue < 0) {
        this.$message.error('等待时长不能小于0')
        return
      }

      this.$emit("confirm",  new NodeDrawerDataModel({
        dialogData: this.form,
      }))
      this.handleCancel()
    },
  }
}
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

//.custom-input-name {
  //width: 440px;
//}

.custom-input-anchor-input {
  width: 104px;
}

.custom-form {
  flex: 1;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
}

.wait-input {
  display: flex;
  align-items: center;
  word-break: keep-all;

  > div {
    margin-right: 6px;
  }

  //.label-left {
  //  margin-right: 6px;
  //}
  //
  //.label-right{
  //  margin-left: 6px;
  //}
}
</style>
